<template>
  <div class="index">
    <el-container>
      <!-- 左边部分 -->
      <el-aside style="width:5px;">
        <!-- 隐藏部分 -->
        <div style="display: none;"> {{ queryAlldown }}
          {{ queryAllLook }}</div>
        <!-- <div id="main" style="border:1px solid;width: 300px;hig: 300px;">
       </div> -->
      </el-aside>
      <!-- 中间部分 -->
      <el-main class="main">
        <el-container>
          <el-header style="display: flex;">
            <el-statistic group-separator="," :precision="2" decimal-separator="." :value="this.ld.lookAll"
              :title="titlel">
              <template slot="prefix">
                <i class="el-icon-view"></i>
              </template>
            </el-statistic>
            <!-- //下载量 -->
            <el-statistic group-separator="," :precision="2" decimal-separator="." :value="this.ld.downAll"
              :title="titled">
              <template slot="prefix">
                <i class="el-icon-document-remove"></i>
              </template>
            </el-statistic>
          </el-header>
        </el-container>
        <!-- <el-button @click="loadechart" style="margin-left: 800px;">加载比例图</el-button> -->
        <el-switch v-model="value2" active-color="#13ce66" @change="open()" inactive-color="#ff4949" active-text="显示比例图"
          inactive-text="隐藏比例图">
        </el-switch>
        <!-- 饼图 -->
        <el-container v-show="this.value2">
          <el-main id="main" style="height: 550px;width: 438px;"></el-main>
          <el-main id="mainl" style="height: 550px;width: 438px;"></el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import httpApi from '@/http';
export default {
  data() {
    return {
      value2: false,
      titlel: '总浏览量',
      titled: '总下载量',
      ld: {
        downAll: 0,
        lookAll: 0,
        lookw: 0,
        lookd: 0,
        downw: 0,
        downd: 0,
      }
    };
  },
  methods: {
    queryLD() {
      //古画浏览量
      httpApi.ldapi.queryLD().then(res => {
        // console.log(res);
        this.ld.lookd = res.data.data[0].sumld
        // console.log(this.lookd);
        // console.log(res.data.data[0].sumld);
      })
    },
    queryLW() {
      //古画浏览量
      httpApi.ldapi.queryLW().then(res => {
        // console.log(res);
        this.ld.lookw = res.data.data[0].sumlw
      })
    },
    queryDW() {
      //西画下载量
      httpApi.ldapi.queryDW().then(res => {
        // console.log(res);
        this.ld.downw = res.data.data[0].sumdw
      })
    },
    queryDD() {
      //古画下载量
      httpApi.ldapi.queryDD().then(res => {
        // console.log(res);
        this.ld.downd = res.data.data[0].sumdd
      })
    },
    open() {
      if (this.value2) {
        this.loadechart()
      }
    },
    loadechart() {
      let downw = this.ld.downw
      let downd = this.ld.downd
      let lookw = this.ld.lookw
      let lookd = this.ld.lookd
      //下载量--饼图
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '画作下载比例',
          subtext: '下载量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '下载量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: downd, name: '东方画下载量' },
              { value: downw, name: '西画下载量' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
      //浏览量饼图
      var chartDoml = document.getElementById('mainl');
      var myChartl = echarts.init(chartDoml);
      var optionl;
      optionl = {
        title: {
          text: '画作浏览情况',
          subtext: '画作浏览量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '浏览量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: lookd, name: '东方画浏览量' },
              { value: lookw, name: '西画浏览量' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      optionl && myChartl.setOption(optionl);
    }
  },
  computed: {
    queryAllLook() {
      this.ld.lookAll = this.ld.lookd + this.ld.lookw
      let lookAll = this.ld.lookAll
      return lookAll
    },
    queryAlldown() {
      // console.log(this.ld.downd);
      // console.log(this.ld.downw);
      this.ld.downAll = this.ld.downd + this.ld.downw
      let downAll = this.ld.downAll
      return downAll
    }
  },

  mounted() {
    this.queryLD()
    this.queryLW()
    this.queryDD()
    this.queryDW()

  },
}
</script>

<style lang="scss" scoped>
.main {
  padding-top: 0;
}

.index {
  height: 600px;
  overflow: hidden;
}
</style>